<template>
  <div class="about">
    <form-com :form.sync="form" @search="searchData" @reset="reset" @exportDownload="exportDownload" labelWidth="50px">
      <el-form-item label="年份">
        <datePickers placeholder="请选择年份" v-model="form.year" :showPickerOptions="true" valueFormat="yyyy" />
      </el-form-item>
      <el-form-item label="月份">
        <datePickers placeholder="请选择月份" v-model="form.monthDate" :showPickerOptions="true" valueFormat="yyyy-MM" />
      </el-form-item>
      <el-form-item label="日期">
        <datePickers placeholder="请选择日期" v-model="form.dayDate" :showPickerOptions="true" :setDefaultValue="true" />
      </el-form-item>
      <el-form-item label="公司">
        <selects placeholder="请选择公司" v-model="form.companyNo" :options="companyOptions" :props="companyOptionsProps"
          @change="selectCompany" />
      </el-form-item>
      <el-form-item label="项目">
        <selects placeholder="请选择项目" v-model="form.projectNo" :options="projectOptions" :props="projectOptionsProps"
          @change="selectProject" />
      </el-form-item>
      <el-form-item label="厂(站)" label-width="60px">
        <selects placeholder="请选择厂(站)" v-model="form.siteNo" :options="siteOptions" :props="siteOptionsProps" />
      </el-form-item>
    </form-com>
    <el-button type="primary" @click="dialogVisible = true">打开弹框</el-button>
    <el-button type="primary" @click="detailDialogVisible = true">详情</el-button>
    <el-dialog title="详细情况" :visible.sync="dialogVisible" width="500px">
      <form-com :form.sync="dialogForm" @submit="submit" @cancel="cancel" labelWidth="60px" :inline="false"
        :formTypeInfo="{ formType: 'submit' }">
        <el-form-item label="年份">
          <datePickers placeholder="请选择年份" v-model="dialogForm.year" valueFormat="yyyy" :full="true" />
        </el-form-item>
        <el-form-item label="月份">
          <datePickers placeholder="请选择月份" v-model="dialogForm.monthDate" valueFormat="yyyy-MM" :full="true" />
        </el-form-item>
        <el-form-item label="日期">
          <datePickers placeholder="请选择日期" v-model="dialogForm.dayDate" :showPickerOptions="true" :setDefaultValue="true"
            :full="true" />
        </el-form-item>
        <el-form-item label="公司">
          <selects placeholder="请选择公司" v-model="dialogForm.companyNo" :options="companyOptions"
            :props="companyOptionsProps" @change="selectCompany" :full="true" />
        </el-form-item>
        <el-form-item label="项目">
          <selects placeholder="请选择项目" v-model="dialogForm.projectNo" :options="projectOptions"
            :props="projectOptionsProps" @change="selectProject" :full="true" />
        </el-form-item>
        <el-form-item label="厂(站)">
          <selects placeholder="请选择厂(站)" v-model="dialogForm.siteNo" :options="siteOptions" :props="siteOptionsProps"
            :full="true" />
        </el-form-item>
      </form-com>
    </el-dialog>
    <el-dialog title="xxx详细" :visible.sync="detailDialogVisible" width="900px">
      <descriptions :objectOfValue="objectOfValue" :dataInfo="dataInfo" :labelObj="labelObj" :contentObj="contentObj" />
    </el-dialog>
  </div>
</template>

<script>
import formCom from '@/components/forms.vue'
import datePickers from "@/components/datePickers.vue"
import selects from "@/components/selects.vue"
import descriptions from "@/components/descriptions.vue"
import dataMinxin from "@/mixin/data"
import formateTime from "@/mixin/formateDate"
export default {
  name: 'AboutView',
  mixins: [dataMinxin, formateTime],
  components: { formCom, datePickers, selects, descriptions },
  data() {
    return {
      form: {
        pageNum: 1,
        pageSize: 10
      },
      rules: {},
      // 公司下拉
      companyOptionsProps: {
        label: 'companyName',
        value: 'companyNo',
      },
      // 项目下拉
      projectOptions: [],
      projectOptionsProps: {
        label: 'projectName',
        value: 'projectNo',
      },
      // 厂(站)下拉
      siteOptions: [],
      siteOptionsProps: {
        label: 'siteName',
        value: 'siteNo',
      },
      dialogVisible: false,
      dialogForm: {},
      detailDialogVisible: false, // 详情弹框
      objectOfValue: [
        { label: '年份', value: 'year' },
        { label: '月份', value: 'monthDate' },
        { label: '日期', value: 'dayDate' },
        { label: '公司', value: 'companyName' },
        { label: '项目', value: 'projectName' },
        { label: '厂(站)', value: 'siteName' },
        { label: '创建时间', value: 'createTime', formater: (val) => this.handleFormatDate(val, 'yyyy-MM-dd hh:mm:ss') }
      ],
      dataInfo: {
        year: '2021',
        monthDate: '2021-01',
        dayDate: '2021-01-01',
        companyName: '公司001',
        projectName: '项目001',
        siteName: '厂(站)001',
        createTime: 1706846567110,
      },
      labelObj: {
        labelAlign: 'right',
        width: '60px'
      },
      contentObj: {
        contentAlign: 'left',
        width: '200px'
      }
    }
  },
  methods: {
    // 搜素
    searchData() {
      this.form.pageNum = 1
      this.getList('getList')
    },
    // 重置
    reset() {
      this.form = {
        pageNum: 1,
        pageSize: 10
      }
      this.getList('reset')
    },
    getList(tip) {
      console.log('this.form', this.form)
      console.log(tip)
    },
    exportDownload() {
      console.log('exportDownload')
    },
    cancel() {
      console.log('cancel')
      this.dialogVisible = false
    },
    submit() {
      this.dialogVisible = false
      this.searchData()
    },
    // 选择公司
    async selectCompany(companyNo) {
      if (this.form.projectNo) this.form.projectNo = ''
      if (this.form.siteNo) this.form.siteNo = ''
      this.siteOptions = []
      if (companyNo) {
        this.projectOptions = this.allProjectOptions.filter(item => item.companyNo == companyNo)
      } else {
        this.projectOptions = []
      }
    },
    // 选择项目
    async selectProject(projectNo) {
      if (this.form.siteNo) this.form.siteNo = ''
      if (projectNo) {
        this.siteOptions = this.allSiteOptions.filter(item => item.projectNo == projectNo && item.companyNo == this.form.companyNo)
      } else {
        this.siteOptions = []
      }
    },
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-dialog__body {
  padding-top: 10px;
}
</style>
